<template>
	<view class="container">
		<view class="u-margin-bottom-20 u-flex u-row-right">
			<u-tag class="u-margin-right-20" v-if="searchData.length !== 0" @click="bankOut" type="warning" text="返回" mode="light"
			 shape="circle" />
			<u-tag @click="openCalendar" text="按日期筛选" mode="light" shape="circleLeft" />
		</view>
		<u-picker @confirm="confirmCalendar" v-model="showCalendar" mode="time" :params="params"></u-picker>
		<wx-load-more v-if="searchData.length <= 0" ref="loadMore" @provider="provider" :pageSize="20">
			<template v-slot:list="{ items }">
				<block v-for="(item,index) in items" :key="index">
					<view class="z-b-r white-bg u-padding-20 u-margin-bottom-20">
						<view class="u-margin-bottom-10">
							<text>打卡状态：</text>
							<u-tag size="mini" :text="item.signinStatus === 0 ? '等待审核' : (item.signinStatus === 1 ? '审核通过' : '审核未通过')" :type="item.signinStatus === 0 ? 'info' : (item.signinStatus === 1 ? 'success' : 'warning')"
							 shape="circle" />
						</view>
						<view class="u-margin-bottom-10">
							<text>打卡日期：{{ item.date }}</text>
						</view>
						<view class="u-margin-bottom-10">
							<text>钻孔深度：{{ item.hole_deep }}</text>
						</view>
						<view class="u-margin-bottom-10">
							<text>孔号：{{ item.hole_mark }}</text>
						</view>
					</view>
				</block>
			</template>
		</wx-load-more>
		<template v-else>
			<block v-for="(item,index) in searchData" :key="index">
				<view class="z-b-r white-bg u-padding-20 u-margin-bottom-20">
					<view class="u-margin-bottom-10">
						<text>打卡状态：</text>
						<u-tag :text="item.signinStatus === 0 ? '等待审核' : (item.signinStatus === 1 ? '审核通过' : '审核未通过')" :type="item.signinStatus === 0 ? 'info' : (item.signinStatus === 1 ? 'success' : 'warning')"
						 shape="circle" />
					</view>
					<view class="u-margin-bottom-10">
						<text>打卡日期：{{ item.date }}</text>
					</view>
					<view class="u-margin-bottom-10">
						<text>钻孔深度：{{ item.hole_deep }}</text>
					</view>
					<view class="u-margin-bottom-10">
						<text>孔号：{{ item.hole_mark }}</text>
					</view>
				</view>
			</block>
		</template>
		
		<!-- 消息提示 -->
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import wxLoadMore from '../../../../components/wx-load-more/wx-load-more.vue';
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				showCalendar: false,
				calendarMode: "date",
				curYearMonth: "",
				searchData: [],
				cueIfSearch:false,
				params: {
					year: true,
					month: true
				}
			};
		},
		components: {
			wxLoadMore
		},
		mounted() {
			this.$refs.loadMore.reLoadData();
		},
		computed: {
			...mapState({
				token: "token",
				wkID: "wkID"
			})
		},
		onPullDownRefresh() {
			if(this.cueIfSearch) return;  // 搜索过程中禁止加载
			this.$refs.loadMore.pullDownRefresh()
		},
		onReachBottom() {
			if(this.cueIfSearch) return;
			this.$refs.loadMore.reachBottom()
		},
		methods: {
			async provider(e) {
				let {
					pageNo,
					pageSize
				} = e;
				let {
					token,
					wkID
				} = this;
				
				this.$loading("正在加载")
				let res = await this.$network({
					api: "main",
					data: {
						action:"wkSignAdmin/getHistoryProject",
						data:{
							token,
							wkID,
							pageNo,
							pageSize
						}
					}
				})
				uni.hideLoading();
				if (res.status === 0) {
					this.$refs.loadMore.pushData(res.data);
				} else if(res.status === 1) {
					this.$refs.loadMore.pushData([]);
				}
			},
			resData(){},
			//按日期筛选
			openCalendar() {
				this.showCalendar = true;
			},
			confirmCalendar(e) {
				this.curYearMonth = `${e.year}-${e.month}`;
				this.filtrateSign();
			},
			async filtrateSign() {
				this.cueIfSearch = true;
				
				let {
					wkID,
					token,
					curYearMonth
				} = this;
				this.$loading("正在加载");

				let res = await this.$network({
					api: "main",
					data: {
						action:"wkSignAdmin/filtrateSign",
						data:{
							wkID,
							token,
							curYearMonth
						}
					}
				})
				uni.hideLoading();
				if (res.status === 0) {
					this.searchData = res.data;
				} else {
					this.$refs.uTips.show({
						title: '此日期没有签到记录',
						type: 'warning'
					})
				}
			},
			bankOut() {
				this.searchData = [];
				this.cueIfSearch = false;
				this.$nextTick(()=>{
					this.$refs.loadMore.reLoadData();
				})
			}
		}
	}
</script>

<style lang="scss">

</style>
